<template>
  <view class="base-page">
    <globalNavBar title="导览"/>
    <view class="news-list">
      <view class="swiper">
        <uv-swiper
          :list="bannerList"
          circular height="100%"

          @change="handleBannerChange"
        />
        <view class="content">
          <view class="title">{{ currentTitle }}</view>
          <view class="box">
            <view class="time">发布日期：{{ currentTime }}</view>
            <view class="total">-{{ transNumber(current) }}/{{ transNumber(total) }}-</view>
          </view>
        </view>
      </view>
      <view class="list">
        <view class="list-item" v-for="item in listData" :key="item.id" @click="goDetails(item.id)">
          <view class="list-item-image">
            <image :src="item.url" alt="" mode="aspectFill"/>
          </view>
          <view class="list-item-content">
            <view class="title">{{item.title}}</view>
            <view class="time">发布日期：{{item.time}}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import http from '@/utils/request.js'
	
export default {
  data() {
    return {
      bannerList: [
      ],
      current: 1,
      total: 3,
      currentText: '',
      currentTitle: '',
      currentTime: '',
      listData: [
      ],
	  page:1,
    }
  },
  computed: {
    transNumber() {
      return n => n < 10 ? `0${n}` : n
    }
  },
  onLoad() {
	  this.getArticleList(true);

  },
  methods: {
    handleBannerChange(e) {
      this.current = e.current + 1
      const {text, title, time} = this.bannerList[e.current]
      this.currentText = text
      this.currentTitle = title
      this.currentTime = time
    },
    handleBannerClick(index) {
      const id = this.bannerList[index].id
      this.goDetails(id)
    },
    goDetails(id) {
      uni.navigateTo({url: '/pagesB/pages/news/map_details?id=' + id})
    },
	getArticleList(isOnload){
		var that = this;
		http.post('api/service/map_list',{page:that.page}).then(function(data){
			let newsList = data.data.list.data;
			let bannerList = data.data.carousel
			if(isOnload){
				for(let i = 0; i < bannerList.length; i++){
					that.bannerList.push({
						id: bannerList[i].id,
						url: http.common.baseUri+bannerList[i].image,
						title: bannerList[i].title,
						time: bannerList[i].add_time
					})
				}
				const {text, title, time} = that.bannerList[0]
				that.currentText = text
				that.currentTitle = title
				that.currentTime = time
				that.total = bannerList.length;
				console.log(that.bannerList)
			}

			for(let i = 0; i < newsList.length; i++){
				that.listData.push({
					  id: newsList[i].id,
					  url: http.common.baseUri+newsList[i].topimg,
					  title: newsList[i].title,
					  time: newsList[i].addtime_date
				})
			}

		})
	},
	onReachBottom(){
		this.page++;
		this.getArticleList(false);
	}
	
  }
}
</script>

<style lang="scss" scoped>
.news-list {
  .swiper {
    width: 100%;
    height: 242px;
    position: relative;

    .content {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      @include flex(column, space-between, center);

      .title {
        font-size: 28rpx;
        color: #fff;
        @include text_ellipsis(1);
      }

      .box {
        margin: 26rpx 20rpx;
        width: calc(100% - 40rpx);
        font-size: 20rpx;
        color: #fff;
        @include flex(row, space-between, center);
      }
    }
  }
  .list {
    width: calc(100% - 60rpx);
    padding: 0 30rpx;
    &-item {
      width: 100%;
      height: 150rpx;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #E5E5E5;
      @include flex(row, flex-start, flex-start);
      &-image {
        width: 228rpx;
        height: 150rpx;
        border-radius: 8rpx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      &-content {
        margin-left: 20rpx;
        width: 0;
        flex: 1;
        height: 100%;
        @include flex(column, space-between, flex-start);
        .title {
          font-size: 28rpx;
          color: #333333;
          line-height: 2em;
          @include text_ellipsis(2);
        }
        .time {
          font-size: 20rpx;
          color: #999999;
        }
      }
    }
  }
}
  
</style>


